<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head th:replace="common :: common_header(~{::title},~{::link},~{::script})">
<meta charset="utf-8" />
<title>系统</title>
<link rel="stylesheet" th:href="@{/css/ex.css}" />
	</head>


<style type="text/css">
			
body {
	
	background-color:#e6e8ea;
	padding-right:0px !important;
	    background-color: white;
	    height:100%;
}
.modal{
	overflow:auto !important;
	padding-right:0px !important;
}


</style>
<script type="text/javascript">

</script>

<body >
<!--cantainer-fluid  开始 -->
<div class = "cantainer">
	<!-- row-fluid  第一个开始 -->
	<div class="row">
		<!-- col-md-12  第一个开始 -->
		<div class = "col-md-12">
			<!-- panel panel-default  第一个开始 -->
			<div class="panel panel-default">
				<div class="panel-body">
				<!-- 查询条件开始 -->
				<form id="searchForm" class="form-horizontal">
					<div class="form-group">
						<label class="col-md-1 control-label" for = "customerName">客户姓名</label>
						<div class="col-md-2">
							<input class="form-control" type="text" name="customerName">
						</div>
						
						<div class="col-sm-6" align="left">
							<button type="button" class="btn btn-md btn-success" onclick = "operation.searchForm()">
								<span class="glyphicon glyphicon-search"></span>查询
							</button>
							<!-- <button type="button" class="btn btn-md btn-info" onclick="">
								<span class="glyphicon glyphicon-download"></span>导出
							</button> -->
						</div>
					</div>
				
				</form>
				<!-- 查询条件结束 -->
				</div>
			</div>
			<!-- panel panel-default  第一个开始 -->
		</div>
		<!-- col-md-12  第一个结束 -->	
	</div>
	<!-- row-fluid  第一个结束 -->
	
	<!-- row-fluid  第二个开始-->
	<div class="row-fluid">
	
			
			
			<div class="row">
				<div class="col-md-3">
					<div class="panel panel-default">
						<div class="panel-body">

								
						<label for="treeview"></label>
          					<div id="treeview"></div>
						</div>
					</div>
				</div>
				<div class="col-md-9">
						
					<div class="panel panel-default">
						<div class="panel-body">
							<!-- toolbar开始 -->
							<div id="toolbar" class="btn-toolbar" role="toolbar">
								<button id="add_btn" type="button" class="btn  btn-success btn-md" onclick = "operation.addWindow()">
									<span class="glyphicon glyphicon-plus"></span> 新增
								</button>
								<button id="edit_btn" type="button" class="btn  btn-info  btn_md" onclick="operation.editWindow()">
									<span class="glyphicon glyphicon-edit"></span> 编辑
								</button>
								<button id="delete_btn" type="button" class="btn  btn-danger btn-md" onclick="operation.deleteFrom()">
									<span class="glyphicon glyphicon-minus"></span> 删除
								</button>
							</div>
							<!-- toolbar结束 -->
							<table id="dg"></table>
						</div>
					</div>
	
				</div>
		</div>
	</div>
<!-- row-fluid  第二个结束-->


</div>
<!--cantainer-fluid  结束 -->

<!-- 第一个model 开始 -->
<div id="setModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keybord="false">
	<div class="modal-dialog" style="width:700px">
		<div class="modal-content">
			<div class="modal-header">
				编辑
			</div>
			<!-- modal-body 开始 -->
			<div class="modal-body">
				<form id="setForm" class="form-horizontal">
					<input type="hidden" id="id" name="id">
					<input type="hidden" id="pid" name="pid">

							<div class="form-group">
								<label class="col-sm-4 control-label" for="pName">父菜单</label>
								<div class="col-sm-6">
									<input class="form-control" id="pName" name="pName"  placeholder="请输入父菜单节点" disabled/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label" for="menuName">名称</label>
								<div class="col-sm-6">
									<input class="form-control"  name="menuName"  placeholder="请输入名称"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label" for="url">路径</label>
								<div class="col-sm-6">
									<input class="form-control"  name="url"  placeholder="请输入路径"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label" for="icon">图标</label>
								<div class="col-sm-6">
									<input class="form-control"  name="icon" value="fa fa-list-alt" placeholder="请输入图标"/>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-4 control-label" for="type">菜单类型</label>
								<div class="col-sm-6">
									<select class="form-control"  name="type"  placeholder="请输入菜单类型">
										<option value="菜单">菜单</option>
										<option value="按钮">按钮</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label" for="orderNum">排序</label>
								<div class="col-sm-6">
									<input class="form-control"  name="orderNum"  placeholder="请输入排序"/>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-4 control-label" for="remark">备注</label>
								<div class="col-sm-6">
									<input class="form-control"  name="remark"  placeholder="请输入备注"/>
								</div>
							</div>
					
					
					
					
					
				</form>	
			</div>
			<!-- modal-body 结束 -->
			<div class="modal-footer">
				<button id="add_save_btn" type="button" class="btn btn-success" onclick = "operation.addForm()">
					<span class="glyphicon glyphicon-ok"></span>保存
				</button>
				<button id="edit_save_btn" type="button" class="btn btn-info" onclick = "operation.editForm()">
					<span class="glyphicon glyphicon-ok"></span>保存
				</button>
				<button id="delete_save_btn" type="button" class="btn btn-warning" onclick = "operation.closeMoal()">
					<span class="glyphicon glyphicon-remove"></span>关闭
				</button>
			</div>
			
		</div>
	</div>



</div>
<!-- 第一个model 结束 -->

<script type="text/javascript" th:inline="none">




$(function() {
	//初始化菜单树
	getTreeView();

});

function getTreeView(){

	getTree("/SysMenu/getSysMenuTreeData",{});
	//初始化表格数据
	intTable();
}







//用户操作
var operation={
	searchForm:function(){
		$('#dg').bootstrapTable("refresh");
	},
	//弹出添加页面
	addWindow:function(){
		var nodes = $('#treeview').treeview('getSelected');
		if(nodes.length==0){
			message.alert("请选择菜单树节点");
			return;
		};
		var node = nodes[0];

		$('#setModal').modal('show');
		formObj.setBtnIsShow("add_save_btn","edit_save_btn",1);
		$("#pid").val(node.id);
		$("#pName").val(node.text);
	},
	//添加表单
	addForm:function(){
		$("#setForm").bootstrapValidator('validate');
		if($("#setForm").data("bootstrapValidator").isValid()){
			var temp = getFormJson("setForm");
			$.post("/SysMenu/insertSysMenu", temp ,function(data) {
			
				$("#dg").bootstrapTable("refresh");
				message.alert(data.showInfo);
				$('#setForm')[0].reset();
				$('#setModal').modal('hide');
				getTreeView();
			});
		}
		
	},
	//弹出修改页面
	editWindow:function(){
		var rows = $('#dg').bootstrapTable('getSelections');
		if(rows.length == 1  ){
			console.info(rows[0])
			if(rows[0].pName==null){
				message.alert("该数据不可编辑");
				return
			}

			setForm("#setForm",rows[0]);
			$('#setModal').modal('show');
			formObj.setBtnIsShow("add_save_btn","edit_save_btn",0);
		}else{
			message.alert("请选择一条要修改的数据！");
			return;
		}
		
	},
	//修改表单
	editForm:function(){
		var validate = $("#setForm").bootstrapValidator('validate');
		if($("#setForm").data("bootstrapValidator").isValid()){
			var temp = getFormJson("setForm");
			$.post("/SysMenu/updateSysMenu", temp ,function(data) {
				
				$("#dg").bootstrapTable("refresh");
				message.alert(data.showInfo);
				$('#setForm')[0].reset();
				$('#setModal').modal('hide');

				getTreeView();
			});
		}
		
	},
	//删除表单
	deleteFrom:function(){
		var rows = $("#dg").bootstrapTable("getSelections");
		if(rows.length == 1  ){
			bootbox.confirm({
				size:"small",
				title:"提示",
				message:"确认删除这条数据吗？",
				callback:function(result){
					if(result){
						$.post("/SysMenu/deleteSysMenu", {id:rows[0].id} ,function(data) {
							
							$("#dg").bootstrapTable("refresh");
							message.alert(data.showInfo);
							getTreeView();
						});
						
					}
				}
			});
			
		}else{
			message.alert("请选择一条要删除的数据！");
			return;
		}
		
	},
	//关闭页面
	closeMoal:function(){
		$('#setForm')[0].reset();
		$('#setModal').modal('hide');
	},
	//导出
	exportFile:function(){
		
		
	},
	//审核
	audit:function(){
		
		
	}
}




function intTable(){
	$('#dg').bootstrapTable({
		url: "/SysMenu/query",
		sidePagination: "server",
		queryParams: fmt.queryParams,
		method: "post",
		contentType: "application/x-www-form-urlencoded",
		pagination: true,
		pageNumber: 1,
		pageSize: 10,
		pageList: [10, 25, 50, 100],
		//search:true,
		clickToSelect: true,
		singleSelect: true,
		toolbar: '#toolbar',
		columns: columns,
	})

};

//表格格式化
var fmt = {
	queryParams:function(params){
		var temp = getFormJson("searchForm");
		temp.rows = params.limit;
		temp.currentPage = (params.offset/params.limit)+1;

			var nodes = $('#treeview').treeview('getSelected');
			if(nodes.length!=0){
				temp.pid=nodes[0].id;
			}






		return temp;
		
	},	
	setTime:function(value,row,index){
		
		return formatTimeYMDhms(value);  //转成年月日时分秒
	},
setOpt:function(value,row,index){
		
		var html ='<button type="button" class="btn btn-md btn-info" onclick = "operation.addScore('+index+')"><span class="glyphicon glyphicon-add"></span>添加成绩</button>'
		return html;
	},	
	setActImgUrl:function(value,row,index){
		return '<img src="'+value+'" style="width:100px;heigth:100px"></img>';
	}		
}
var columns=[[
 	 {
		field:'ck',
		width:'2%',
		checkbox:true,
		align:'center',
		
	},  
	{
		field:'id',
		title:'id',
		width:10,
		align:'center',
		visible:false
	},
					{title: '父id', field: 'pid', align: 'center', valign: 'middle',visible:false},

					{title: '名称', field: 'menuName', align: 'center', valign: 'middle',visible:true},
					{title: '父名称', field: 'pName', align: 'center', valign: 'middle',visible:true},
					{title: '菜单类型', field: 'type', align: 'center', valign: 'middle',visible:true},
					{title: '路径', field: 'url', align: 'center', valign: 'middle',visible:true},
					{title: '图标', field: 'icon', align: 'center', valign: 'middle',visible:true},
					{title: '排序', field: 'orderNum', align: 'center', valign: 'middle',visible:true},
					{title: '创建时间', field: 'createTime', align: 'center', valign: 'middle',visible:true},
					{title: '备注', field: 'remark', align: 'center', valign: 'middle',visible:true},

	
	
]];


$(function(){
	$("#setForm").bootstrapValidator({
		/* live:'disabled', */
		excluded:[':disabled'],
		feedbackIcons: {
    　　　　　　　　valid: 'glyphicon glyphicon-ok',
    　　　　　　　　invalid: 'glyphicon glyphicon-remove',
    　　　　　　　　validating: 'glyphicon glyphicon-refresh'
　　　　　   },
		fields:{




				menuName:{
					validators:{
						 notEmpty: {
							message:"菜单名称不能为空!",
						},
					}

				},



				url:{
					validators:{
						 notEmpty: {
							message:"路径不能为空!",
						},
					}

				},

				pid:{
					validators:{
						 notEmpty: {
							message:"父节点不能为空!",
						},
					}

				},



				type:{
					validators:{
						 notEmpty: {
							message:"类型不能为空!",
						},
					}

				},



				orderNum:{
					validators:{
						 notEmpty: {
							message:"排序不能为空!",
						},
					}

				},




		}

	});



})





</script>



</body>
</html>
